<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商务流程</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="totalform.css">
</head>
<body>
<div id="tf">
<!--标题栏-->
    <div class="top-container">
    <a href="#" style="float: left"><img src="/img/箭头.png" width="65px" height="65px" alt="退出"></a>
    VTC商务工单
        <div v-for = "order in orders" class="title-name">{{order.name}}</div>
    </div>

<!-- 主体表格 -->
    <table>
        <tr v-for = "order in orders" class="tf-1st">
            <td style="float: left">{{order.number}}</td>
            <td>{{order.date}}</td>
            <td style="float: right">
                <div v-if = "order.state === '草稿'">
                    <span class="state0">{{order.state}}</span>
                </div>
                <div v-else-if = "order.state === '进行中'||order.state === '已完成'">
                    <span class="state1">{{order.state}}</span>
                </div>
                <div v-else>
                    <span class="state2">{{order.state}}</span>
                </div>
            </td>
        </tr>

        <tr v-for = "order in orders" class="tf-2nd">
            <td style="float: left">报单员：{{order.client}}</td>
            <td>派单员：{{order.server}}</td>
            <td style="float: right">接单员：{{order.clerk}}</td>
        </tr>

        <tr v-for = "order in orders" class="tf-3rd">
            <td colspan="2">{{order.act}}</td>
            <td style="float: right"><a :href="order.url">查看</a></td>
        </tr>

        <tr v-for = "order in orders" class="tf-4st">
            <td style="float: left"><a :href="order.actprice">活动报价</a></td>
            <td><a :href="order.proprice">产品报价</a></td>
            <td style="float: right"><a :href="order.contract">合同</a></td>
        </tr>
    </table>

    <!-- 筛选器 -->

</div>
<script src="totalform.js"></script>
</body>
</html>